<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/10/13
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>AAA心理测试系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css" >
</head>
<body>
<div class="wrap">
    <img src="img/login.jpg" class="imgStyle">
    <div class="loginForm">
        <form class="layui-form">
            <div class="logoHead">
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" lay-verify="required" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" lay-verify="required" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" lay-verify="required|validateCode"  class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitDiv">
                        <button type="submit" class="submit layui-btn layui-btn-primary" lay-submit="" lay-filter="loginUser" style="margin-left: 140px">登录</button>
                </div>
            </div>
        </form>


    </div>
</div>
<script type="application/javascript" src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
<script type="application/javascript" src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
<script>
    var $;
    layui.use(['layer','jquery','form','element'],function () {
        var layer = layui.layer
        ,   upload = layui.upload
        ,   form = layui.form
        ,   element = layui.element;
        $=layui.jquery;
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
        createCode('#loginCode');

        //自定义验证：保证验证码正确
        form.verify({
            //validateCode:自定义表单的layui-verify的昵称，value：对应表单的值
            validateCode:function (value){
                //输入框中验证码 value；图片中的验证码 loginCode
                var cardCode = $("#loginCode").val();
                //将输入的验证码转换为大写
                var newvalue = value.toUpperCase();
                if (newvalue != cardCode){
                    return "验证码错误";
                }
            }
        });

    //    监听登录表单
        form.on('submit(loginUser)',function (data){
            // alert(JSON.stringify(data.field));
            $.ajax({
                url:"${pageContext.request.contextPath}/loginTest",
                data:data.field,
                type:"post",
                success:function(d){
                    if(d.data==true){
                        //如果成功，跳转到后台管理界面
                        window.location="${pageContext.request.contextPath}/tMenu/getAll";
                    }else {
                        layer.msg("登陆失败",{icon:3});
                    }
                }
            })
            return false;
        })
    });


    // 页面初始化生成验证码
    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 注册流程
    function register() {
        layer.open({
            type: '1',
            content: $('.registerPage'),
            title: '注册',
            area: ['430px', '600px'],
            closeBtn: '1',
        })
    }

</script>
</body>
</html>

